<template>
  <div class="details gridListContainer" ref="songList">
    <scroll :data="playLists" class="recommend-content" ref="scroll" :pullup="true" @scrollToEnd="scrollToEnd()">
      <div>
        <grid-list :list="playLists" :cols="songGridList.cols" :activePath="'songList'" :listHeight="'auto'"></grid-list>
        <loading v-show="show && playLists.length" class="load"></loading>
      </div>
    </scroll>
    <loading v-show="!playLists.length" class="load"></loading>
    <router-view></router-view>
  </div>
</template>

<script type="text/ecmascript-6">
  import Scroll from '../../base/scroll/scroll.vue'
  import GridList from '../../base/grid-list/grid-list.vue'
  import Loading from '../../base/loading/loading.vue'
  import {playlistMixin} from '../../common/js/mixin/playList'
  const ERROk = 200
  const LIMIT = 20
  const OFFSET = 0
  export default{
    mixins: [playlistMixin],
    data() {
      return {
        playLists: [],
        songGridList: {
          cols: 2
        },
        show: false
      }
    },
    created() {
      this.offset = OFFSET
      this.limit = LIMIT
      this.getPlayLists(this.offset * this.limit)
    },
    methods: {
      getPlayLists(offset) {
        this.show = true
        this.$ajax.get(`/top/playlist?limit=20&offset=${offset}`).then((response) => {
          if (response.data.code === ERROk) {
            this.playLists.push(...response.data.playlists)
            this.show = false
          }
        })
      },
      hasPlayList(playingList) {
        const bottom = playingList.length > 0 ? '4.5rem' : ''
        this.$refs.songList.style.bottom = bottom
        this.$refs.scroll.refresh()
      },
      scrollToEnd() {
        this.offset++
        this.getPlayLists(this.offset * this.limit)
      }
    },
    components: {
      Scroll,
      GridList,
      Loading
    }
  }
</script>

<style>
  .recommend-content{
    height: 100%;
    overflow: hidden;
  }
  .gridListContainer{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .recommend-content .load{
    height: 2rem;
  }
  .recommend-content .load img{
    height: 100%;
  }
</style>
